<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素的显示模式</title>
		<link herf="css/xs.css" rel="styleheet"/>
	</head>
	<body>
		<!--
		元素的显示模式：
		1.块元素
		比较霸道，单独占一行
		默认宽度是父级元素宽度的100%
		可以设置宽，高，对齐属性
		块元素可以包含行内元素和块元素
		常见标签：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>....
		
		2.行内元素
		一行显示多个
		默认宽度是内容的宽度
		宽，高属性设置无效
		行内元素里一般只包含文本或其他行内元素
		链接标签中不要在包含链接标签
		常见标签：<a>,<strong>,<em>,<span>
		3.行内块元素 inline-block
		一行显示多个
		默认宽度是内容本身的宽度
		可以设置宽，高
		<input />,<img /> , <td></td>
		元素显示模式转换：
		display:block/inline-block/inline;
		-->
		<div>
		<h3>redmi k70</h3>
		<p>性能旋风</p>
		<span>2399元</span>
		<del>2499元</del>
		</div>
		<span>用户名：</span>
		<input type="text"/>
		<span>密码：</span>
		<input type="text"/>
		<a herf="#">baidu.....</a>
		
	</body>
</html>
